<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <title>原梦蛋仔</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<div id="app">
    <div class="container text-center" style="align-items: center;justify-content: center;display: flex">
        <div class="row" style="height: 80vh;align-items: center;justify-content: center;display: flex">
            <div class="col-4 no-scroll" style="overflow: scroll;height: 100%;">
                <div class="card">
                    <ul class="list-group list-group-flush">
                        <li v-for="(item,index) in students" key="item.id"
                            :class="index===choose_student?'list-group-item btn btn-outline-info active':'list-group-item btn btn-outline-info'"
                            @click="choose_student=index">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-8" style="height: 100%">
                <div class="card" style="height: 100%;">
                    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="https://images.wallpaperscraft.com/image/single/boat_mountains_lake_135258_1280x720.jpg"
                                     class="d-block w-100"
                                     alt="https://images.wallpaperscraft.com/image/single/boat_mountains_lake_135258_1280x720.jpg">
                            </div>
                            <div class="carousel-item">
                                <img src="https://images.wallpaperscraft.com/image/single/ocean_beach_aerial_view_134429_1280x720.jpg"
                                     class="d-block w-100"
                                     alt="https://images.wallpaperscraft.com/image/single/ocean_beach_aerial_view_134429_1280x720.jpg">
                            </div>
                            <div class="carousel-item">
                                <img src="https://images.wallpaperscraft.com/image/single/river_grass_evening_92669_1280x720.jpg"
                                     class="d-block w-100"
                                     alt="https://images.wallpaperscraft.com/image/single/river_grass_evening_92669_1280x720.jpg">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
                                data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
                                data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                    <!--             -->
                    <div class="card-body" style="flex-grow: 1" v-if="!is_revise">
                        <h5 class="card-title" style="margin-bottom: 10px" v-html="students[choose_student].name"></h5>
                        <div class="row align-items-start" style="margin-bottom: 20px">
                            <div class="col">
                                <form class="form-floating">
                                    <input type="text" class="form-control" id="floatingInputValue1"
                                           :value="students[choose_student].id"
                                           disabled>
                                    <label for="floatingInputValue1" disabled="">学生ID</label>
                                </form>
                            </div>
                            <div class="col">
                                <div class="col">
                                    <form class="form-floating">
                                        <input type="text" class="form-control" id="floatingInputValue2"
                                               :value="students[choose_student].sex"
                                               disabled>
                                        <label for="floatingInputValue2" disabled="">性别</label>
                                    </form>
                                </div>
                            </div>
                            <div class="col">
                                <form class="form-floating">
                                    <input type="text" class="form-control" id="floatingInputValue3"
                                           :value="students[choose_student].age"
                                           disabled>
                                    <label for="floatingInputValue3" disabled="">年龄</label>
                                </form>
                            </div>
                            <div class="col">
                                <form class="form-floating">
                                    <input type="text" class="form-control" id="floatingInputValue4"
                                           :value="students[choose_student].birthDay" disabled>
                                    <label for="floatingInputValue4" disabled="">出生日期</label>
                                </form>
                            </div>
                        </div>
                        <div class="row align-items-start" style="margin-bottom: 20px">
                            <div class="col-2">
                            </div>
                            <div class="col">
                                <div class="accordion accordion-flush" id="accordionFlushExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                                                    aria-expanded="false" aria-controls="flush-collapseOne">
                                                学生详细
                                            </button>
                                        </h2>
                                        <div id="flush-collapseOne" class="accordion-collapse collapse"
                                             data-bs-parent="#accordionFlushExample">
                                            <div class="accordion-body no-scroll"
                                                 style="overflow: scroll;max-height: 65px;">
                                                <code>{{students[choose_student].detailed}}</code>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-2">
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-start" style="margin-bottom: 20px" v-if="!is_revise">
                        <div class="col-5">
                        </div>
                        <div class="col-5">
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-warning" @click="change_revise">操作视图</button>
                        </div>
                    </div>
                    <!--             -->
                    <div style="flex-grow: 1;width: 100%;align-items: center;justify-content: center;display: flex"
                         v-if="is_revise">
                        <div style="display: flex;align-items: center;justify-content: center;width: 60%;flex-direction: column">
                            <div class="row g-2" style="margin-bottom: 20px">
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="floatingInputGrid"
                                               v-model="students[choose_student].name">
                                        <label for="floatingInputGrid">姓名</label>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="floatingInputGrid1"
                                               v-model="students[choose_student].sex">
                                        <label for="floatingInputGrid1">性别</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-2">
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="floatingInputGrid2"
                                               v-model="students[choose_student].age">
                                        <label for="floatingInputGrid2">年龄</label>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="floatingInputGrid3"
                                               placeholder="2002-02-11" v-model="students[choose_student].birthDay">
                                        <label for="floatingInputGrid3">生日</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 30%;">
                            <div class="form-floating">
                                <textarea class="form-control" v-model="students[choose_student].detailed"
                                          id="floatingTextarea2"
                                          style="height: 100px"></textarea>
                                <label for="floatingTextarea2">学生详细</label>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-start" style="margin-bottom: 20px" v-if="is_revise">
                        <div class="col-4">
                        </div>
                        <div class="col-2">
                            <button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasTop1" aria-controls="offcanvasTop"
                                    @click="append_student">添加
                            </button>

                            <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop2"
                                 aria-labelledby="offcanvasTopLabel1">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title" id="offcanvasTopLabel2">Offcanvas top</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                            aria-label="Close"></button>
                                </div>
                                <div class="offcanvas-body">
                                    {{response}}
                                </div>
                            </div>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-danger" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasTop1" aria-controls="offcanvasTop"
                                    @click="delete_student_by_id">删除
                            </button>

                            <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop1"
                                 aria-labelledby="offcanvasTopLabel1">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title" id="offcanvasTopLabel1">Offcanvas top</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                            aria-label="Close"></button>
                                </div>
                                <div class="offcanvas-body">
                                    {{response}}
                                </div>
                            </div>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"
                                    @click="update_student">修改
                            </button>

                            <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop"
                                 aria-labelledby="offcanvasTopLabel">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title" id="offcanvasTopLabel">提示</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                            aria-label="Close"></button>
                                </div>
                                <div class="offcanvas-body">
                                    {{response}}
                                </div>
                            </div>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-secondary" @click="change_revise">返回</button>
                        </div>
                    </div>
                    <!--             -->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const {createApp, ref} = Vue;
    app = createApp({
        setup() {
            const response = ref('');
            const students = ref([{name: '', age: '', sex: '', birthDay: '', detailed: '', id: ' '}]);
            const choose_student = ref(0);
            const get_students = () => {
                axios.get('http://localhost:8080/get-students')
                    .then(function (response) {
                        students.value = response.data;
                    })
                    .catch(function (error) {

                    })
            }
            const delete_student_by_id = () => {
                const choose = students.value[choose_student.value];
                axios.get('http://localhost:8080/delete-student-by-id?id=' + choose.id)
                    .then(function () {
                        response.value = "删除学生成功";
                        get_students();
                        choose_student.value = 0;
                    }).catch(function () {
                    response.value = "删除学生失败"
                });
            }
            const append_student = () => {
                const choose = students.value[choose_student.value];
                axios.post('http://localhost:8080/append-student', {
                    id: null,
                    name: choose.name,
                    sex: choose.sex,
                    age: choose.age,
                    birthDay: choose.birthDay,
                    detailed: choose.detailed
                }).then(function () {
                    response.value = "添加学生成功";
                    get_students();
                }).catch(function () {
                    response.value = "添加学生失败"
                });
            }
            const update_student = () => {
                const choose = students.value[choose_student.value];
                axios.post('http://localhost:8080/update-student', {
                    id: choose.id,
                    name: choose.name,
                    sex: choose.sex,
                    age: choose.age,
                    birthDay: choose.birthDay,
                    detailed: choose.detailed
                }).then(function () {
                    response.value = "修改学生成功";
                    get_students();
                }).catch(function () {
                    response.value = "修改学生失败"
                });
            }
            get_students();
            const message = ref('Hello vue!');
            const is_revise = ref(false);
            const method = () => {
                window.alert('haha');
            }
            const change_revise = () => {
                is_revise.value = !is_revise.value;
            }
            const test = (i) => {
                window.alert(i)
            }
            return {
                message,
                method,
                change_revise,
                is_revise,
                students,
                get_students,
                choose_student,
                test,
                response,
                append_student,
                update_student,
                delete_student_by_id
            }
        }
    });
    app.mount('#app');
</script>
<script>

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
<script src="/index.js"></script>
</body>
</html>